<template>
  <!-- 侧边菜单栏 -->
  <el-menu router default-active="2" class="el-menu-vertical" :collapse="isCollapse" @open="handleOpen"
    @close="handleClose">
    <!-- 论文信息子菜单 -->
    <el-menu-item index="/table" class="menu">
      <template #title>
        <el-icon>
          <Document />
        </el-icon>
        <span>论文信息</span>
      </template>
    </el-menu-item>
    <!-- 论文信息子菜单 -->
    <el-menu-item index="/speedOfProgress" class="menu">
      <template #title>
        <el-icon>
          <Odometer />
        </el-icon>
        <span>论文进度</span>
      </template>
    </el-menu-item>
    <!-- 文献管理 -->
    <el-menu-item index="/researchMaterials" class="menu">
      <template #title>
        <el-icon>
          <MessageBox />
        </el-icon>
        <span>文献资料</span>
      </template>
    </el-menu-item>

    <!-- 学生信息 -->
    <el-menu-item index="/collagePaperRank" class="menu">
      <template #title>
        <el-icon>
          <Histogram />
        </el-icon>
        <Router-link to="/collagePaperRank"><span>学院排名</span></Router-link>

      </template>
    </el-menu-item>

    <!-- 活动公告 -->
    <el-menu-item index="/ActivityAnnouncement" class="menu">
      <template #title>
        <el-icon>
          <Management />
        </el-icon>
        <span>活动公告</span>
      </template>
    </el-menu-item>

    <!-- 个人中心 -->
    <el-menu-item index="/personalCenter" class="menu">
      <template #title>
        <el-icon>
          <User />
        </el-icon>
        <span>个人中心</span>
      </template>
    </el-menu-item>
  </el-menu>
</template>

<script setup>
import { ref } from "vue";
import { Management, Odometer, Document, Histogram, User, MessageBox } from "@element-plus/icons-vue";
import InformationEngineering from "./InformationEngineering.vue";

// 控制菜单折叠与展开
const updateNarBar = () => {
  narbar.value.isCollapse = !narbar.value.isCollapse;
};

// 菜单折叠状态
const isCollapse = ref(false);

// 处理菜单打开事件
const handleOpen = (key, keyPath) => {
  console.log(key, keyPath);
};
// 处理菜单关闭事件
const handleClose = (key, keyPath) => {
  console.log(key, keyPath);
};


// 暴露 isCollapse 以便外部访问
defineExpose({
  isCollapse,
});
</script>

<style scoped>
/* 菜单样式 */
.el-menu-vertical,
.el-menu-vertical:not(.el-menu--collapse) {
  height: 100vh;
  padding-top: 60px;
}

.titleName {
  font-size: 24px;
  font-weight: 600;
}

.title {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  font-size: 18px;
  font-weight: 600;
  border-bottom: #cfcfcfbd 1px solid;
}

.menu {
  font-size: 14px;
}

a {
  color: #333;
  text-decoration: none;
}
</style>